<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<title></title>
		<!-- <link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css"> -->
	</head>
	<body>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: palegreen;
				
			}
			#test{
				display: none;
			}
			#test:checked+.box{
				background: palevioletred;
			}
			
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#toggle{
				display: none;
			}
			
			#toggle:checked~.navigator{
				height: 100vh;
				right: -70px;
			}
			#toggle:checked~.tou{
				left: 0px;
			}
			.top{
				position: fixed;
				right: 0;
				top: 0;
			}
			.test{
				margin-bottom: 0px;
				padding: 8px 10px;
				background-color: #D62537;
					
			}
			.test span{
				display: block;
				width: 10px;
				height: 2px;
				background: #fff;
				margin: 1px 0;
				position: relative;
				transition: all .3s linear;
			}
			#toggle:checked+.test span:nth-child(1){
				transform: rotate(45deg);
				top: 3px;
			}
			#toggle:checked+.test span:nth-child(2){
				display: none;
			}
			#toggle:checked+.test span:nth-child(4){
				transform: rotate(-45deg);
			}
			#toggle:checked+.test span:nth-child(3){
				display: none;
			}
			.navigator{
				position: absolute;
				top: 23px;
				right: -100vw;
				width: 100vw;
				background: #0B1B2B;
				transition: all .7s linear;
			}
			.navigator>ul>li{
				width: 80%;
				text-align: center;
				padding: 10px;
				border-bottom: 1px solid #162635;
			}
			.navigator>ul>li a{
				color: #D62536;
			}
			ul li{
				list-style: none;
			}
			
		</style>
			<div class="top">
				<nav>
					<div class="tou">
						<input type="checkbox" id="toggle">
						<label class="test" for="toggle">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</label>
						<div class="navigator">
							<ul>
								<li>
									<a href="">首页</a>
								</li>
								<li>
									<a href="">关于</a>
								</li>
								<li>
									<a href="">服务</a>
								</li>
								<li>
									<a href="">新闻</a>
								</li>
								<li>
									<a href="">联系</a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		<script type="text/javascript">
			
			
			
			
		</script>
		
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>
